<template>
  <div class="wrap">
    <div class="wrap-top flex">
      <p class="add font-14 pointer" @click="toDetail">添加产品</p>
      <div class="form-search flex">
        <el-input v-model="form.keyword" placeholder="请输入"></el-input>
        <p class="flex-center flex-align-items-center pointer">
          <i class="iconfont icon-sousuo"></i>
        </p>
      </div>
    </div>
    <div class="list flex-between flex-wrap">
      <div v-for="item in list" :key="item.id" class="item flex flex-column">
        <img :src="item.img">
        <div class="flex-between flex-align-items-center">
          <p class="item-name font-12-B ellipsis-1">{{ item.name }}</p>
          <p class="item-btn font-10 pointer">原链接</p>
        </div>
      </div>
    </div>
    <div class="pagination flex flex-align-items-center">
      <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="form.total" />
    </div>
  </div>

  <edit-pro v-if="editProInfo.show" :info="editProInfo" @close="editProInfo.show = false"></edit-pro>
</template> 
<script setup>
import EditPro from '../../myPro/components/editPro.vue';
import { defineEmits, ref } from 'vue';
import { ElMessageBox } from 'element-plus';

const emit = defineEmits(['change']);

const form = ref({
  total: 100
});
const list = ref([
  {
    name: '第一阶段，首次邀约【有预算】',
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc',
    id: 1
  }
]);
const editProInfo = ref({
  show: false
});

const toDetail = () => {
  editProInfo.value = {
    show: true
  }
}
const checkHandleClick = e => {
  emit('change', e);
}
</script>

<style lang="less" scoped>
.wrap {
  height: 100%;
  padding: 0 24px;
  position: relative;

  .wrap-top {
    margin-bottom: 24px;

    .add {
      width: 72px;
      height: 32px;
      border-radius: 2px;
      background: @main-color;
      color: #fff;
      text-align: center;
      line-height: 32px;
      margin-right: 24px;
    }

    .form-search {
      &::v-deep {
        .el-input {
          width: 188px;
          height: 32px;
        }
      }

      p {
        width: 32px;
        height: 32px;
        background: @main-color;
        border-radius: 0 2px 2px 0;
        position: relative;
        right: 2px;

        i {
          color: #fff;
        }
      }
    }
  }

  .list {
    height: calc(100% - 135px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0;
    }

    .item {
      width: 190px;
      height: 124px;
      margin-bottom: 16px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .14);
      overflow: hidden;

      img {
        width: 100%;
        height: 85px;
      }

      div {
        height: 39px;
        padding: 0 8px 0 24px;

        .item-name {
          color: #333;
          width: 48px;
        }

        .item-btn {
          width: 46px;
          height: 22px;
          background: @main-color;
          border-radius: 2px;
          color: #fff;
          text-align: center;
          line-height: 22px;
        }
      }
    }
  }

  .pagination {
    position: absolute;
    left: 0;
    bottom: -88px;
    width: 100%;
    height: 64px;
    justify-content: end;
    padding-right: 24px;
  }
}
</style>